<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
    request.setAttribute("basePath", basePath);
%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="/tags" prefix="date"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>角色管理页面</title>


    <link href="houtai/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
    <link href="houtai/font-awesome/css/font-awesome.css?v=4.3.0" rel="stylesheet">
    <!-- Morris -->
    <link href="houtai/css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
    <!-- Gritter -->
    <link href="houtai/js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
    <link href="houtai/css/animate.css" rel="stylesheet">
    <link href="houtai/css/style.css" rel="stylesheet">
    <link href="houtai/uploadify/uploadify.css" rel="stylesheet" type="text/css" />


    <style type="text/css">
        .hiddenTD{
            display: none;
        }

        .tr td{
            word-break:break-all;
        }
        .cc{
            width: 400px;
        }
        .s{
            margin-top: -329px;
            float: right;
            margin-right: 50px;
        }
        #file_upload1{
            margin: auto;
        }
        .c{
            margin-top: 17px;
        }
        .gg{
            width: 55px;
            height: 22px;
            display: block;
            margin: auto;
        }
        #file_upload1-queue{
            width:150px;
        }
        #file_upload{
            margin: auto;
        }
        td {
            border-top: 1px solid #e7eaec;
            line-height: 1.42857;
            padding: 8px;
            border: 1px solid #e7e7e7;
            /* //vertical-align: top; */
        }
    </style>
    <script>
        <c:if test="${sessionUsername==null}">
        window.location.href = "login.jsp";
        </c:if>
        <c:if test="${requestScope.error!=null}">
        alert('${requestScope.error}')
        </c:if>
    </script>
</head>
<body>
<div id="wrapper">
    <nav class="navbar-default navbar-static-side" role="navigation">
        <div class="sidebar-collapse">
            <ul class="nav" id="side-menu">
                <li class="nav-header">
                    <div class="dropdown profile-element"> <span>
                            <img alt="image" class="img-circle" src="houtai/img/profile_small.jpg"/>
                             </span>
                        <a data-toggle="dropdown" class="dropdown-toggle" href="index.html#">
                                <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">${sessionUsername}</strong>
                             </span>  <span class="text-muted text-xs block" >${sessionTitle}<b class="caret"></b></span> </span>
                        </a>
                        <ul class="dropdown-menu animated fadeInRight m-t-xs">
                            <li class="divider"></li>
                            <li><a href="remove">安全退出</a>
                            </li>
                        </ul>
                    </div>
                    <div class="logo-element">
                        ${sessionUsername}
                    </div>

                </li>
                <li class="active" id="first">
                    <a href="index.do" style="border-left: 0px"><i class="fa fa-desktop"></i>主页 </a>
                </li>
                <li>
                    <a href="#"><i class="fa fa fa-globe"></i> <span class="nav-label">文章管理</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li><a href="getArticleList.do">文章列表</a>
                        </li>
                        <li><a href="getClassifyList.do">文章分类列表</a>
                        </li>
                    </ul>
                </li>

                <li>
                    <a href="#"><i class="fa fa fa-globe"></i> <span class="nav-label">订单管理</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li><a href="getOrders">订单列表</a>
                        </li>
                        <li><a href="getDetails">流水列表</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa fa-globe"></i> <span class="nav-label">项目管理</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li><a href="getProjectList">项目列表</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa fa-globe"></i> <span class="nav-label">车辆类型管理</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li><a href="getTypesList">车辆类型列表</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-flask"></i> <span class="nav-label">管理员设置</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li><a href="getMembersList.do">管理员列表</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="#"><i class="fa fa-flask"></i> <span class="nav-label">系统管理</span><span class="fa arrow"></span></a>
                    <ul class="nav nav-second-level">
                        <li><a href="authGroupList.do">角色管理</a>
                        </li>
                        <li><a href="modulesList.do">模块管理</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <div id="page-wrapper" class="gray-bg dashbard-1">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top"   style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                    <form   class="navbar-form-custom" method="post" action="search_results.html">
                        <div class="form-group">
                            <input type="text" placeholder="请输入您需要查找的内容 …" class="form-control" name="top-search" id="top-search">
                        </div>
                    </form>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <span class="m-r-sm text-muted welcome-message"><a href="index.html" title="返回首页"><i class="fa fa-home"></i></a>安全隐患管理系统欢迎您</span>
                    </li>

                    <li>
                        <a href="remove">
                            <i class="fa fa-sign-out"></i> 退出
                        </a>
                    </li>
                </ul>

            </nav>
        </div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-10">
                <h2>角色管理界面</h2>
                <ol class="breadcrumb">
                    <li>
                        <a href="index.do">主页</a>
                    </li>
                    <li>
                        <strong>角色列表</strong>
                    </li>
                </ol>
            </div>
            <div class="col-lg-2">
            </div>
        </div>
        <div class="wrapper wrapper-content">
            <div class="wrapper wrapper-content">
                <div class="row">
                    <div class="col-lg-12">
                        <form action="getRoleList.do" method="get">
                            <table class="table table-bordered">
                                <tr>
                                    <td align="center" bgcolor="#f1f1f1">角色名称</td>
                                    <td align="center"><input type="text" name="name"  value="${requestScope.name}"></td>
                                    <td align="right">
                                        <input type="submit" value="点击查询" class="btn btn-primary"/>
                                    </td>
                                    <td align="center">
                                        <button type="button" class="btn btn-primary" data-toggle="modal"
                                                data-target="#insertModal">添加角色</button>
                                    </td>
                                </tr>
                            </table>
                        </form>
                    </div>
                </div>
            <div class="row">
                <div class="col-lg-12">
                    <table class="table table-bordered table-striped table-hover">
                        <tbody>
                        <tr align="center">
                            <td nowrap="nowrap"><strong>序号</strong></td>
                            <td><strong>角色名称</strong></td>
                            <td><strong>创建时间</strong></td>
                            <td><strong>创建人员</strong></td>
                            <td><strong>项目状态</strong></td>
                            <td><strong> 排序 </strong></td>
                            <td><strong>查看人员</strong></td>
                            <td><strong> 操作 </strong></td>
                        </tr>
                        <c:forEach items="${roles}" var="t" varStatus="s">
                            <tr align="center" class="tr">
                                <td>${s.count}</td>
                                <td class="hiddenTD">${t.id}</td>
                                <td>${t.name}</td>
                                <td><date:date value="${t.createtime*1000}"></date:date></td>
                                <td>${t.creator}</td>
                                <td>
                                    <c:if test="${t.status==1}">
                                    <button class="btn btn-info btn-circle juzhong" type="button"><i class="fa fa-check"></i></button>
                                    </c:if> <c:if test="${t.status==0}">
                                    <button class="btn btn-warning btn-circle juzhong" type="button"><i class="fa fa-times"></i></button>
                                    </c:if>
                                </td>
                                <td class="hiddenTD">${t.status}</td>
                                <td>${t.orders}</td>
                                <td>
                                    <div class="btn-group btn-group-xs">
                                        <button type="button" class="btn btn-w-m btn-primary" data-toggle="modal" data-target="#EmpModal" onclick="selectEmpID(this)">查看</button>
                                    </div>
                                </td>
                                <td>
                                    <div class="btn-group btn-group-xs">
                                        <button type="button" class="btn btn-w-m btn-warning"  data-toggle="modal" data-target="#Modal" onclick="update(this)">编辑</button>
                                        <button type="button" class="btn btn-w-m btn-danger" data-toggle="modal" data-target="#myModal6" onclick="remove(this)">删除</button>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="pull-right">
                By：<a href="http://www.zi-han.net" target="_blank">zihan's blog</a>
            </div>
            <div>
                <strong>Copyright</strong> H+ &copy; 2014
            </div>
        </div>
    </div>
</div>
<!-----------------------------------------------------添加分类模拟窗口------------------------------------------------------------------>
<div class="modal inmodal fade" id="insertModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">角色管理</h4>
                <small class="font-bold">添加角色</small>
            </div>
            <div class="modal-body">
                <form name="addForm" action="insertRole.do" method='post' onsubmit="javascript:return checkAdd()">
                    <div class="row form-body form-horizontal m-t">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">角色名称：</label>
                            <div class="col-sm-9 cc">
                                <input type="text" name="name"  class="form-control dm-name"
                                       placeholder="请输入角色名称" required="required" id="role_add_name">
                                <span class="dm-span"></span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">排序：</label>
                            <div class="col-sm-9 cc">
                                <input type="text" name="orders"  class="form-control dm-name"
                                       placeholder="请输入排序大小" required="required" id="role_add_orders">
                                <span class="dm-span"></span>
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-info" style="width:80px">增加</button>
                            <button class="btn" data-dismiss="modal"   style="width:80px">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    <!-----------------------------------------------------修改项目模拟窗口------------------------------------------------------------------>
    <div class="modal inmodal fade" id="Modal" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">
                        <span>×</span><span class="sr-only">Close</span>
                    </button>
                    <h4 class="modal-title">角色管理</h4>
                    <small class="font-bold">修改角色</small>
                </div>
                <div class="modal-body">
                    <form name="addForm" action="modifyRole.do" method='post' onsubmit="javascript:return checkModify()">
                        <input type="hidden" name="id" id="modifyid"/>
                        <input type="hidden" id="role_modify_original_name">
                        <div class="row form-body form-horizontal m-t">
                            <div class="form-group">
                                <label class="col-sm-3 control-label">角色名称：</label>
                                <div class="col-sm-9 cc">
                                    <input type="text" name="name"  class="form-control dm-name"
                                           placeholder="请输入角色名称" required="required" id="role_modify_name">
                                    <span class="dm-span"></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label">排序：</label>
                                <div class="col-sm-9 cc">
                                    <input type="text" name="orders"  class="form-control dm-name"
                                           placeholder="请输入排序大小" required="required" id="role_modify_orders">
                                    <span class="dm-span"></span>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-sm-3 control-label" >公开状态：</label>
                                <div class="col-sm-9">
                                    <label class="radio-inline"><input type="radio" value="1" id="pcc_used" name="status">启用</label>
                                    <label class="radio-inline"><input type="radio" value="0" id="pcc_unused" name="status">未启用</label>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-info" style="width:80px">修改</button>
                            <button class="btn" data-dismiss="modal" style="width:80px">取消</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
<!-----------------------------------------------------删除分类模拟窗口------------------------------------------------------------------>
<div class="modal inmodal" id="myModal6" tabindex="-1"style="display: none;">
    <div class="modal-dialog modal-sm">
        <div class="modal-content animated fadeIn">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span>×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title">删除窗口</h4>
            </div>
            <form  action="deleteRole.do" method='get' onsubmit="javascript:return check()">
                <div class="modal-body">
                    您确定要删除吗?
                    <input type="hidden" name="id" id="deleteId">
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">删除</button>
                    <button type="button" class="btn btn-white" data-dismiss="modal">取消</button >
                </div>
            </form>
        </div>
    </div>
</div>
<!-----------------------------------------------------查询人员窗口------------------------------------------------------------------>
<div class="modal inmodal fade" id="EmpModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span>×</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title">部门管理</h4>
                <small class="font-bold">查询部门人员</small>
            </div>
            <div class="modal-body">
                <table class="table table-bordered table-striped table-hover" id="section_emp_list">
                    <tbody>
                        <tr align="center">
                            <td><strong>序号</strong></td>
                            <td><strong>名字</strong></td>
                            <td><strong>手机号</strong></td>
                            <td><strong>性别</strong></td>
                            <td><strong>部门</strong></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</div>
<!-- Mainly scripts -->
<script src="houtai/Jquery/jquery-3.0.0.js"></script>
<script src="houtai/uploadify/jquery.uploadify.min.js"></script>
<script src="houtai/js/bootstrap.min.js?v=3.4.0"></script>
<script src="houtai/js/plugins/metisMenu/jquery.metisMenu.js"></script>
<script src="houtai/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<!-- Custom and plugin javascript -->
<script src="houtai/js/hplus.js?v=2.2.0"></script>
<script src="houtai/js/plugins/pace/pace.min.js"></script>

<script>
    function remove(obj){
        var tds = $(obj).parent().parent().parent().find('td');
        //获取表格中的一行数据
        var deleteId =tds[1].innerHTML;
        $('#deleteId').val(deleteId);
    }
    function selectEmpID(obj) {
        var tds = $(obj).parent().parent().parent().find('td');
        //获取表格中的一行数据
        var roleid =tds[1].innerHTML;
        $("#section_emp_list").html('<tr align="center"> ' +
            '<td><strong>序号</strong></td> ' +
            '<td><strong>名字</strong></td> ' +
            '<td><strong>手机号</strong></td> ' +
            '<td><strong>性别</strong></td> ' +
            '<td><strong>部门</strong></td> ' +
            '</tr>')
        $.ajax({
            url:"selectEmp",
            type:"get",
            data:{roleid:roleid},
            dataType:"json",
            async:false,
            success:function (Result) {
                var result = Result.result;
                if(result == 0){
                    $("#section_emp_list").append('<tr align="center">' +
                        '<td colspan="5">无数据</td>' +
                        '</tr>')
                }else{
                    var data = Result.data;
                    $.each(data,function (index,item) {
                        var sex = item.sex==1?'男':'女';
                        $("#section_emp_list").append('<tr align="center">' +
                            '<td>'+(index+1)+'</td>' +
                            '<td>'+item.name+'</td>' +
                            '<td>'+item.mobile+'</td>' +
                            '<td>'+sex+'</td>' +
                            '<td>'+item.sectionname+'</td>' +
                            '</tr>')
                    })
                }
            }
        })
    }
    function update(obj) {
        var tds = $(obj).parent().parent().parent().find('td');
        var id =tds[1].innerHTML;
        var name = tds[2].innerHTML;
        var status = tds[6].innerHTML;
        var orders = tds[7].innerHTML;
        $("#modifyid").val(id);
        $("#role_modify_name").val(name);
        $("#role_modify_original_name").val(name);
        $("#role_modify_orders").val(orders);
        if(status == 1){
            $("#pcc_used").attr("checked",true);
        }
        else{
            $("#pcc_unused").attr("checked",true);
        }
    }
    function checkAdd() {
        var name = $("#role_add_name");
        if(checkNameExist(name.val())){
            name.next().html("角色名字已存在");
            return false;
        }else {
            name.next().html("")
        }
        var orders = $("#role_add_orders");
        if(isNaN(orders.val())){
            orders.next().html("排序输入不正确")
            return false;
        }else{
            orders.next().html("")
        }
        return true;
    }
    function checkModify(){
        var originalname = $("#role_modify_original_name").val();
        var name = $("#role_modify_name");
        if(originalname != name.val() && checkNameExist(name.val())){
            name.next().html("角色名字已存在");
            return false;
        }else {
            name.next().html("")
        }
        var orders = $("#role_modify_orders");
        if(isNaN(orders.val())){
            orders.next().html("排序输入不正确")
            return false;
        }else{
            price.next().html("")
        }
        return true;
    }
    function check() {
        var id = $('#deleteId').val();
        var flag = false;
        $.ajax({
            url:"selectEmp",
            type:"get",
            data:{roleid:id},
            dataType:"json",
            async:false,
            success:function (Result) {
                var result = Result.result;
                if(result > 0){
                    alert("该角色下有未处理的人员存在，请将该角色下人员变换成其他角色后再删除")
                    flag = false;
                    $("#myModal6").modal("hide");
                }
                if(result == 0){
                    flag = true;
                }
            }
        })
        return flag;
    }
    function checkNameExist(name) {
        var flag = false;
        $.ajax({
            type:"get",
            url:"checkRoleNameExist",
            data:{name:name},
            dataType:"json",
            async:false,
            success:function (Result) {
                var result = Result.result;
                if(result!=0){
                    flag = true;
                }else {
                    flag = false;
                }
            }
        })
        return flag;
    }
</script>
</body>
</html>
</html>
